<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, reactive, ref, onUnmounted } from 'vue';
import { pieImg } from '@/assets/base64'
import { post } from '@/utils/request';
import { statistics } from '@/api/index';
import { on } from 'events';
let trafficWay: any = reactive([]);
let total: any = ref(0);
const timer: any = ref(null)
const data: any = ref([]);
const seriesOption: any = ref([])
const color = ['#6191EC', '#E98D1A', '#29F1FA'];




const option = reactive({
    color: color,
    title: {
        text: `{total| ${total.value}}\n理赔运单`, // 使用富文本格式
        top: '30%', // 位置上移
        left: '29%',
        textAlign: "center",
        textStyle: {
            color: '#9DA9B9',
            fontSize: 14,
            fontWeight: '400',
            rich: {
                total: {
                    fontSize: 24,
                    color: '#6191EC',
                    fontWeight: 'bold',
                    padding: [0, 13, 10, 0] // 下边距
                }
            }
        }
    },
    graphic: {
        elements: [{
            type: "image",
            z: 3,
            style: {
                image: pieImg,
                width: 175,
                height: 175
            },
            left: '10.7%',
            top: 'center',
            position: [100, 100]
        }]
    },
    tooltip: {
        show: false
    },
    legend: {
        icon: "rect",
        itemWidth: 12,
        itemHeight: 12,
        itemStyle: {
            borderRadius: 0, // 可选：去除圆角，确保严格正方形
        },
        orient: 'vertical',
        right: 80,
        top: 'center',
        align: 'left',
        itemGap: 20,
        textStyle: {
            fontSize: 14,
            rich: {  // 富文本样式定义
                name: {  // 名称样式
                    color: 'rgba(255,255,255,0.3545)',
                    fontSize: 12,
                    padding: [0, 4, 0, 0] // 右间距
                },
                value: {  // 数值样式
                    color: '#FFFFFF', // 白色
                    fontSize: 14,
                    padding: [0, 4, 0, 0] // 右间距
                },
                unit: {   // "票"字样式
                    color: '#FFFFFF', // 白色
                    fontSize: 14,
                    padding: [0, 0, 0, 0] // 左间距
                }
            }
        },
        formatter: (name) => {
            const item = trafficWay.find(d => d.name === name);
            const value = item ? item.value : 0;
            // 分块应用样式
            return `{name|${name}}{value| ${value}}{unit|票}`;
        },
        data: trafficWay.map((item: any) => item.name)
    },
    toolbox: {
        show: false
    },
    series: seriesOption.value
})


const getList = async () => {
    try {
        const res: any = await post(statistics.expSummary);
        if (res.code === '0000') {
            // 1. 正确赋值 trafficWay
            trafficWay = res.data.map((item: any) => ({
                name: item.status,
                value: item.num
            }));
            console.log(trafficWay, 'trafficWaytrafficWay')
            // 2. 计算总数
            total.value = trafficWay.reduce((sum: any, item: any) => sum + item.value, 0);
            option.title.text = `{total| ${total.value}}\n理赔运单`;
            console.log(total.value, 'total.valuetotal.value')
            // 3. 清空 data
            data.value = [];
            for (let i = 0; i < trafficWay.length; i++) {
                data.value.push({
                    value: trafficWay[i].value,
                    name: trafficWay[i].name,
                    itemStyle: {
                        normal: {
                            borderWidth: 5,
                            borderColor: color[i],
                            shadowColor: color[i]
                        }
                    }
                }, {
                    value: 2,
                    name: '',
                    itemStyle: {
                        normal: {
                            borderRadius: 0,
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0
                        }
                    }
                });
            }
            // 4. 更新 seriesOption
            seriesOption.value = [{
                name: '',
                type: 'pie',
                clockWise: false,
                radius: [65, 70],
                padAngle: 5,
                hoverAnimation: false,
                center: ['30%', '47%'],
                itemStyle: {
                    normal: {
                        label: { show: false },
                        labelLine: { show: false }
                    }
                },
                data: data.value
            }];
            // 5. 关键：同步更新 option.legend.data 和 option.series
            option.legend.data = trafficWay.map((item: any) => item.name);
            option.series = seriesOption.value;
        }
    } catch (error) { }
};
onMounted(() => {
    getList()
    // 每20分钟刷新一次
    timer.value = setInterval(() => {
        getList()
    }, 1200000);
})
onUnmounted(() => {
    if (timer.value) {
        clearInterval(timer.value);
    }
})
</script>

<template>
    <div class="right-bottom flex flex-col">
        <div class="title w-full h-[40px] flex items-center pl-[12px] pr-[14px] mb-[20px] justify-between">
            异常情况
            <img src="@/assets/img/content-img/title-point-left-top.png" alt="" class="title-opint w-[12px] h-[12px]">
        </div>
        <!-- echarts -->
        <div class="content w-[441px] h-[183px]">
            <!-- <echart :options="options" style="width: 100%; height: 300px;" /> -->
            <echart :options="option" />
        </div>
    </div>
</template>

<style scoped lang="scss">
.right-bottom {}

.title {
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 700;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 20px;
    text-shadow: 0px 0px 8px rgba(2, 3, 7, 0.35);
    text-align: left;
    font-style: normal;
    text-transform: none;
    border-left: 7px solid #6191EC;
    background-image: url('@/assets/img/content-img/title-background-left-top.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.content {
    height: calc(100% - 60px);
    width: 100%;
}
</style>
